<!DOCTYPE html>
<html lang="en">
<!-- 立即提现左边箭头 -->
<!-- 消息记录文件图标 -->
<!-- 个人资料 屏蔽联系人 删除联系人-->
<!-- 好友列表 上下箭头 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>lom</title>
  <link rel="stylesheet" href="./bulma.min.css">
  <link rel="stylesheet" href="./bulma-extensions.min.css">
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="./reset.css">

  <script src="./bulma-tagsinput.min.js"></script>
  <script src="./jquery@3.3.1.min.js"></script>
  <script src="./utils.js"></script>

  <link href="./css/emoji.css" rel="stylesheet">
  <script src="./js/config.js"></script>
  <script src="./js/util.js"></script>
  <script src="./js/jquery.emojiarea.js"></script>
  <script src="./js/emoji-picker.js"></script>
  
</head>

<body>
  <main>
    <section class="tabs left_menu">
      <ul>
        <li class="is-active left_menu_item" data-option="messages">
          <a class="badge is-badge-danger is-badge-large" data-badge="29">
            <i class="iconfont">&#xe620;</i>
            <span>消息</span>
          </a>
        </li>
        <li class="left_menu_item" data-option="friends">
          <a  class="badge is-badge-danger is-badge-large" data-badge="3">
            <i class="iconfont">&#xe621;</i>
            <span>好友</span>
          </a>
        </li>
        <li class="left_menu_item" data-option="likes">
          <a>
            <i class="iconfont">&#xe622;</i>
            <span>收藏</span>
          </a>
        </li>
        <li>
          <a>
            <div class="dropdown is-up add_dropdown">
              <i class="iconfont">&#xe623;</i>
              <span>添加/创建</span>
              <div class="dropdown-menu" id="dropdown-menu" role="menu">
                <div class="dropdown-content">
                  <a href="#" class="dropdown-item">
                    添加好友
                  </a>
                  <a class="dropdown-item">
                    创建群聊
                  </a>
                </div>
              </div>
            </div>
          </a>

          <div class="settings modal-button" data-target="modal-ter" aria-haspopup="true">
            <a>
              <i class="iconfont">&#xe624;</i>
              <span>设置</span>
            </a>
          </div>
        </li>
      </ul>
    </section>
    <section class="lom_content">
      <div class="lom_content_item is-active" data-item="messages">
        <div class="messages">
          <div class="msg_left">
            <div class="lom_content_item_search">
              <i class="iconfont lom_content_item_search_icon">&#xe625;</i>
              <input class="lom_content_item_search_input" placeholder="&nbsp;&nbsp;&nbsp;搜索联系人、群组、聊天记录等">
            </div>
            <div class="msg_box messages_content" data-option="msg_notifacation">
              <div class="msg_box_img"><i class="iconfont">&#xe60a;</i></div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">通知</div>
                  <div class="msg_box_title_time">晚上6:15</div>
                </div>
                <div class="msg_box_text">你还有10红包余额尚未提现，请及时提现</div>
              </div>
            </div>

            <div class="msg_box messages_content" data-option="msg_single">
              <div class="msg_box_img"></div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">水晶橙子</div>
                  <div class="msg_box_title_time">晚上6:21</div>
                </div>
                <div class="msg_box_text">你的电话怎么打不通呀？</div>
              </div>
            </div>

            <div class="msg_box messages_content" data-option="msg_group">
              <div class="msg_box_img"></div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">Nicepsd ^_^</div>
                  <div class="msg_box_title_time">周三</div>
                </div>
                <div class="msg_box_text">NicePSD赵蒙：[链接]</div>
              </div>
            </div>
            
          </div>

          <div class="msg_content">
            <div class="msg_content_dropdown">
              <div class="dropdown dropdown_mine is-right">
                <div class="dropdown-trigger dropdown_img">
                  <img src="./dropdown_mine_img.png" alt="">
                  <i class="iconfont dropdown_arrow">&#xe632;</i>
                </div>
                <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                  <div class="dropdown-content">
                    <a href="#" class="dropdown-item dropdown_item_mine">
                      <div class="dropdown_item_info">
                        <div class="dropdown_item_info_name">LeoUID</div>
                        <div class="dropdown_item_info_status">添加工作状态...</div>
                      </div>
                      <div class="dropdown_item_img">
                        <img src="./dropdown_mine_img.png" alt="">
                      </div>
                    </a>
                    <a href="#" class="dropdown-item">
                      修改密码
                    </a>
                    <a href="#" class="dropdown-item">
                      帮助反馈
                    </a>
                    <a href="#" class="dropdown-item">
                      下载手机版
                    </a>
                    <a href="#" class="dropdown-item">
                      关于乐么
                    </a>
                    <a href="#" class="dropdown-item">
                      退出登录
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="msg_content_box is-active msg_notifacation messages_contentbox" data-item="msg_notifacation">
              <div class="msg_notice_box">
                <a><div class="msg_notice_titleimg"></div>
                  <div class="msg_notice_titleinfo"><span>你还有10个红包余额尚未提现，请绑定银行卡自动提现。</span><span>2018-04-16 14:56</span></div>
                  <div class="msg_notice_titlehref">立即提现<i class="iconfont">&#xe668;</i> </div></a>
              </div>
              <div class="msg_notice_box">
                  <a><div class="msg_notice_titleimg"></div>
                    <div class="msg_notice_titleinfo"><span>乐么lOM - 告别办公臃肿的即时通讯应用，让工作变的更轻松更愉悦更高效。</span><span>2018-04-16 14:56</span></div>
                    <div class="msg_notice_titlehref">查看详细<i class="iconfont">&#xe668;</i> </div></a>
                </div>
                <div class="msg_notice_box">
                    <a>
                      <div class="msg_notice_titleinfo_content">
                          <div class="msg_notice_titleinfo_box">
                              <div class="msg_notice_titleinfo"><span>烽火叙利亚｜俄罗斯反应克制，在叙长期经营的地位不会动摇</span><span>2018-04-16 14:56</span></div>
                              <div class="msg_notice_titleinfotext">2018年4月13日，美国及其盟国对叙利亚发动空袭，目的是惩罚叙利亚政府“对平民使用化学武器”。据媒体报道，4月7日，叙利亚东古塔地区疑似发生化武袭击平民事件，导致70多人死亡。事件曝光后，美、英等国以及叙利亚反对派纷纷谴责叙利亚阿萨德政权动用化学武器残害平民...</div>
                            </div>
                            <div class="msg_notice_titleinfo_img"></div>
                      </div>
                      
                      <div class="msg_notice_titlehref">查看详情<i class="iconfont">&#xe668;</i> </div>
                    </a>
                  </div>
            </div>
            <div class="msg_content_box messages_contentbox" data-item="msg_single">
              <div class="msg_content_title">
                <div class="msg_content_title_info">
                  <img src="./dropdown_mine_img.png" alt="">
                  <span>杜娟</span>
                </div>
                <div class="msg_content_title_menu">
                  <a><i class="iconfont msg_content_title_menu_icon tooltip is-tooltip-bottom"  data-tooltip="添加新成员" data-show="quickview" data-target="quickviewDefault">&#xe635;</i></a>
                  <a><i class="iconfont msg_content_title_menu_icon tooltip is-tooltip-bottom"  data-tooltip="聊天记录">&#xe634;</i></a>
                  <a><i class="iconfont msg_content_title_menu_icon tooltip is-tooltip-bottom"  data-tooltip="个人资料" data-show="quickview" data-target="quickviewPersonalinfo">&#xe636;</i></a>
                </div>
                
                
              </div>
              <div class="msg_content_view">
                <div class="msg_content_view_friendmsg msg_content_view_friendmsg_friend">
                  <div class="msg_content_view_friendimg"><img src="./dropdown_mine_img.png" alt=""></div>
                  <div class="msg_content_view_friendmsg_box">
                    <span class="msg_content_view_friendtime">上午 09:31</span>
                    <div class="msg_content_view_friendfile">
                      <div class="msg_content_view_friendfile_icon">
                        <i class="iconfont">&#xe636;</i>
                        <div class="msg_content_view_friendfile_name">四川商投2018年会-少纪检.pptx</div>
                      </div>
                      <div class="msg_content_view_friendfile_size">872.6kb</div>
                    </div>
                    <div class="msg_content_view_friendtext">资料发给你了，你先大概看一下，下班后我们找个咖啡吧，坐下来慢慢聊聊。</div>
                  </div>
                </div>
                <div class="msg_content_view_msgtime">今天</div>
                <div class="msg_content_view_friendmsg msg_content_view_friendmsg_mine">
                  <div class="msg_content_view_friendimg">
                    <img src="./dropdown_mine_img.png" alt="">
                  </div>
                  <div class="msg_content_view_friendmsg_box">
                    <span class="msg_content_view_friendtime">上午 09:31</span>
                    <div class="msg_content_view_friendtext_status">未读</div>
                    <div class="msg_content_view_friendtext">好的，可以！我先大概看一下，然后我们在详谈！</div>
                  </div>
                </div>
              </div>

              <div class="msg_content_editor">
                <div class="sendbox_sendicon">
                  <span>发送</span>
                  <i class="iconfont">&#xe629;</i>
                </div>
                <div class="msg_content_editor_sendbox_title">
                  <span class="msg_content_editor_sendbox_smileface">
                    <!-- <i class="iconfont">&#xe657;</i> -->
                  </span>
                  <span>
                    <i class="iconfont">&#xe654;</i>
                  </span>
                  <span>
                    <input id="img_input2" type="file">
                    <label for="img_input2" id="img_label2">
                      <i class="iconfont">&#xe628;</i>
                    </label>
                  </span>
                  <style>
                    #img_input2 {
                      display: none;
                    }
                  </style>
                </div>
                <div class="msg_content_editor_sendbox">
                  <div class="emoji_container">
                    <textarea class="form-control textarea-control" rows="3" placeholder="请输入内容" data-emojiable="true"></textarea>
                  </div>
                  
                </div>
              </div>


            </div>
            <div class="msg_content_box messages_contentbox" data-item="msg_group">
              <div class="msg_content_title">
                <div class="msg_content_title_info">
                  <img src="./dropdown_mine_img.png" alt="">
                  <span>Nicepsd ^_^</span>
                </div>
                <div class="msg_content_title_menu">
                  <a><i class="iconfont msg_content_title_menu_icon tooltip is-tooltip-bottom"  data-tooltip="群公告" data-show="quickview" data-target="quickviewGroupnotice">&#xe639;</i></a>
                  <a><i class="iconfont msg_content_title_menu_icon tooltip is-tooltip-bottom"  data-tooltip="聊天记录">&#xe634;</i></a>
                  <a><i class="iconfont msg_content_title_menu_icon tooltip is-tooltip-bottom"  data-tooltip="群设置" data-show="quickview" data-target="quickviewGroupsetting">&#xe63a;</i></a>
                </div>
                
                
              </div>
              <div class="msg_content_view">
                <div class="msg_content_view_friendmsg msg_content_view_friendmsg_friend">
                  <div class="msg_content_view_friendimg"><img src="./dropdown_mine_img.png" alt=""></div>
                  <div class="msg_content_view_friendmsg_box">
                    <span class="msg_content_view_friendtime"><span>麦克</span> 上午 09:31</span>
                    <div class="msg_content_view_friendfile">
                      <div class="msg_content_view_friendfile_icon">
                        <i class="iconfont">&#xe636;</i>
                        <div class="msg_content_view_friendfile_name">四川商投2018年会-少纪检.pptx</div>
                      </div>
                      <div class="msg_content_view_friendfile_size">872.6kb</div>
                    </div>
                  </div>
                </div>
                <div class="msg_content_view_friendmsg msg_content_view_friendmsg_friend">
                    <div class="msg_content_view_friendimg"><img src="./dropdown_mine_img.png" alt=""></div>
                    <div class="msg_content_view_friendmsg_box">
                      <span class="msg_content_view_friendtime"><span>弗利汉斯</span> 上午 09:31</span>
                      <div class="msg_content_view_friendtext">资料发给你了，你先大概看一下，下班后我们找个咖啡吧，坐下来慢慢聊聊。</div>
                    </div>
                  </div>
                <div class="msg_content_view_msgtime">今天</div>
                <div class="msg_content_view_friendmsg msg_content_view_friendmsg_mine">
                  <div class="msg_content_view_friendimg">
                    <img src="./dropdown_mine_img.png" alt="">
                  </div>
                  <div class="msg_content_view_friendmsg_box">
                    <span class="msg_content_view_friendtime">上午 09:31</span>
                    <div class="msg_content_view_friendtext_status">未读</div>
                    <div class="msg_content_view_friendtext">好的，可以！我先大概看一下，然后我们在详谈！</div>
                  </div>
                </div>
              </div>
              <div class="msg_content_editor">
                <div class="sendbox_sendicon">
                  <span>发送</span>
                  <i class="iconfont">&#xe629;</i>
                </div>
                <div class="msg_content_editor_sendbox_title">
                  <span class="msg_content_editor_sendbox_smileface">
                    <!-- <i class="iconfont">&#xe657;</i> -->
                  </span>
                  <span>
                    <i class="iconfont">&#xe654;</i>
                  </span>
                  <span>
                    <input id="img_input2" type="file">
                    <label for="img_input2" id="img_label2">
                      <i class="iconfont">&#xe628;</i>
                    </label>
                  </span>
                  <style>
                    #img_input2 {
                      display: none;
                    }
                  </style>
                </div>
                <div class="msg_content_editor_sendbox">
                  <div class="emoji_container">
                    <textarea class="form-control textarea-control" rows="3" placeholder="请输入内容" data-emojiable="true"></textarea>
                  </div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="lom_content_item" data-item="friends">
        <div class="messages">
          <div class="msg_left">
            <div class="lom_content_item_search">
              <i class="iconfont lom_content_item_search_icon">&#xe625;</i>
              <input class="lom_content_item_search_input" placeholder="&nbsp;&nbsp;&nbsp;搜索联系人、群组、聊天记录等">
            </div>
        
            <div class="msg_box accordion active">
              <div class="msg_box_img">
                <i class="iconfont">&#xe60a;</i>
              </div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">新的朋友</div>
                  <div class="msg_box_title_time"></div>
                </div>
                <div class="msg_box_text">你有新朋友，正请求添加你为好友</div>
              </div>
            </div>
        
            <div class="friends_panel" style="max-height: 327px;">
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">Tell-MeYou</div>
                    <div class="msg_box_title_time">已添加</div>
                  </div>
                  <div class="msg_box_text">Tiger</div>
                </div>
              </div>
              <div class="msg_box friendslist_content" data-option="friendslist_friendinfo">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">讲故事的小纯子</div>
                    <div class="msg_box_title_time">等待验证</div>
                  </div>
                  <div class="msg_box_text">讲故事的小纯子 请求添加你为好友</div>
                </div>
              </div>
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">空心泡沫</div>
                    <div class="msg_box_title_time">已添加</div>
                  </div>
                  <div class="msg_box_text">我是王小硕~</div>
                </div>
              </div>
            </div>
        
            <div class="msg_box accordion">
              <div class="msg_box_img">
                <i class="iconfont">&#xe60a;</i>
              </div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">我的群组</div>
                  <div class="msg_box_title_time"></div>
                </div>
                <div class="msg_box_text">你有3个群组</div>
              </div>
            </div>
            <div class="friends_panel">
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">Nicepsd^_^</div>
                    <div class="msg_box_title_time"></div>
                  </div>
                  <div class="msg_box_text">Nicepsd为群主，成员共15名</div>
                </div>
              </div>
              <div class="msg_box friendslist_content" data-option="friendslist_group">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">Q3梦想起航</div>
                    <div class="msg_box_title_time"></div>
                  </div>
                  <div class="msg_box_text">讲故事的小纯子为群主，成员共2名</div>
                </div>
              </div>
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">周末踏青</div>
                    <div class="msg_box_title_time"></div>
                  </div>
                  <div class="msg_box_text">我是王小硕~为群主，成员共17名</div>
                </div>
              </div>
            </div>
        
            <div class="msg_box accordion">
              <div class="msg_box_img">
                <i class="iconfont">&#xe60a;</i>
              </div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">新的朋友</div>
                  <div class="msg_box_title_time"></div>
                </div>
                <div class="msg_box_text">你有新朋友，正请求添加你为好友</div>
              </div>
            </div>
        
            <div class="friends_panel">
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">Tell-MeYou</div>
                    <div class="msg_box_title_time">已添加</div>
                  </div>
                  <div class="msg_box_text">Tiger</div>
                </div>
              </div>
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">讲故事的小纯子</div>
                    <div class="msg_box_title_time">等待验证</div>
                  </div>
                  <div class="msg_box_text">讲故事的小纯子 请求添加你为好友</div>
                </div>
              </div>
              <div class="msg_box friendslist_content" data-option="">
                <div class="msg_box_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="msg_box_content">
                  <div class="msg_box_title">
                    <div class="msg_box_title_name">周末踏青</div>
                    <div class="msg_box_title_time">已添加</div>
                  </div>
                  <div class="msg_box_text">我是王小硕~为群主，成员共17名</div>
                </div>
              </div>
            </div>
          </div>
          <div class="msg_content">
            <div class="msg_content_dropdown">
              <div class="dropdown dropdown_mine is-right">
                <div class="dropdown-trigger dropdown_img">
                  <img src="./dropdown_mine_img.png" alt="">
                  <i class="iconfont dropdown_arrow">&#xe632;</i>
                </div>
                <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                  <div class="dropdown-content">
                    <a href="#" class="dropdown-item dropdown_item_mine">
                      <div class="dropdown_item_info">
                        <div class="dropdown_item_info_name">LeoUID</div>
                        <div class="dropdown_item_info_status">添加工作状态...</div>
                      </div>
                      <div class="dropdown_item_img">
                        <img src="./dropdown_mine_img.png" alt="">
                      </div>
                    </a>
                    <a href="#" class="dropdown-item">
                      修改密码
                    </a>
                    <a href="#" class="dropdown-item">
                      帮助反馈
                    </a>
                    <a href="#" class="dropdown-item">
                      下载手机版
                    </a>
                    <a href="#" class="dropdown-item">
                      关于乐么
                    </a>
                    <a href="#" class="dropdown-item">
                      退出登录
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="msg_content_box is-active friendslist_friendinfo friendslist_contentbox" data-item="friendslist_friendinfo">
              <div class="friendslist_friendinfo_title">
                <div class="friendslist_friendinfo_title_box">
                  <div class="friendslist_friendinfo_title_box_item">空心泡沫</div>
                  <div class="friendslist_friendinfo_title_box_item">人一旦做出成绩来，全世界都会和颜悦色。</div>
                </div>
                <div class="friendslist_friendinfo_title_img"><img src="./friendlist_avatar.png" alt=""></div>
              </div>
              <div class="friendslist_friendinfo_table">
                <table class="table is-hoverable is-half">
                  <tbody>
                    <tr>
                      <td>备注名称</td>
                      <td>王老师(王小硕)
                      </td>
                    </tr>
                    <tr>
                      <td>国家/地区</td>
                      <td>中国 北京</td>
                    </tr>
                    <tr>
                      <td>乐么号</td>
                      <td>happy5789937567</td>
                    </tr>
                    <tr>
                      <td>手机号码</td>
                      <td>138 8888 8888</td>
                    </tr>
                    <tr>
                      <td>电子邮箱</td>
                      <td>wangxiaoshuo@sina.com</td>
                    </tr>
                    <tr>
                      <td>好友来源</td>
                      <td>通过群聊添加</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="friendslist_friendinfo_table">
                <table class="table is-hoverable is-half">
                  <tbody>
                    <tr>
                      <td>打个招呼</td>
                      <td>我是王小硕~
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="friendslist_friendinfo_footer">
                <a class="button is-info">发消息</a>
                <div class="friendslist_friendinfo_footer_btns">
                  <a><i class="iconfont">&#xeab5;</i></a>
                  <a><i class="iconfont">&#xeab5;</i></a>
                  <a><i class="iconfont">&#xeab5;</i></a>
                </div>
              </div>
            </div>
            <div class="msg_content_box friendslist_group friendslist_contentbox" data-item="friendslist_group">
              <div class="friendslist_group_box">
                <div class="friendslist_group_img"><img src="./friendslist_group_box.png" alt=""></div>
                <div class="friendslist_group_title">Q3梦想起航 (<span>3</span>)</div>
                <div class="friendslist_group_title_text">讲故事的小纯子为群主，成员共<span>2</span>名</div>
              </div>
              <div class="friendslist_group_btn">
                <a class="button is-info">发消息</a>
                <i class="iconfont">&#xeab5;</i>
                <i class="iconfont">&#xe63d;</i>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      <div class="lom_content_item" data-item="likes">
        <div class="messages">
          <div class="msg_left">
            <div class="lom_content_item_search">
              <i class="iconfont lom_content_item_search_icon">&#xe625;</i>
              <input class="lom_content_item_search_input" placeholder="&nbsp;&nbsp;&nbsp;搜索联系人、群组、聊天记录等">
            </div>
            <div class="msg_box likes_content" data-option="msg_likes">
              <div class="msg_box_img">
                <i class="iconfont">&#xe60a;</i>
              </div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">所有收藏</div>
                  <div class="msg_box_title_time"></div>
                </div>
                <div class="msg_box_text">这里有你所有的收藏</div>
              </div>
            </div>
            <div class="msg_box likes_content" data-option="">
              <div class="msg_box_img">
                <i class="iconfont">&#xe60a;</i>
              </div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">相册</div>
                  <div class="msg_box_title_time"></div>
                </div>
                <div class="msg_box_text">收藏的图片/视频/文字</div>
              </div>
            </div>
            <div class="msg_box likes_content" data-option="">
              <div class="msg_box_img">
                <i class="iconfont">&#xe60a;</i>
              </div>
              <div class="msg_box_content">
                <div class="msg_box_title">
                  <div class="msg_box_title_name">链接</div>
                  <div class="msg_box_title_time"></div>
                </div>
                <div class="msg_box_text">收藏的外部分享链接</div>
              </div>
            </div>
      
            
      
          </div>
      
          <div class="msg_content">
            <div class="msg_content_dropdown">
              <div class="dropdown dropdown_mine is-right">
                <div class="dropdown-trigger dropdown_img">
                  <img src="./dropdown_mine_img.png" alt="">
                  <i class="iconfont dropdown_arrow">&#xe632;</i>
                </div>
                <div class="dropdown-menu" id="dropdown-menu3" role="menu">
                  <div class="dropdown-content">
                    <a href="#" class="dropdown-item dropdown_item_mine">
                      <div class="dropdown_item_info">
                        <div class="dropdown_item_info_name">LeoUID</div>
                        <div class="dropdown_item_info_status">添加工作状态...</div>
                      </div>
                      <div class="dropdown_item_img">
                        <img src="./dropdown_mine_img.png" alt="">
                      </div>
                    </a>
                    <a href="#" class="dropdown-item">
                      修改密码
                    </a>
                    <a href="#" class="dropdown-item">
                      帮助反馈
                    </a>
                    <a href="#" class="dropdown-item">
                      下载手机版
                    </a>
                    <a href="#" class="dropdown-item">
                      关于乐么
                    </a>
                    <a href="#" class="dropdown-item">
                      退出登录
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="msg_content_box is-active msg_likes likes_contentbox" data-item="msg_likes">
              <div class="msg_notice_box">
                <a>
                  <div class="msg_notice_titleinfo_content">
                    <div class="msg_notice_titleinfo_box">
                      <div class="msg_notice_titleinfo">
                        <span>烽火叙利亚｜俄罗斯反应克制，在叙长期经营的地位不会动摇</span>
                        <span>来源：今日头条</span>
                      </div>
                      <div class="msg_notice_titleinfotext">2018年4月13日，美国及其盟国对叙利亚发动空袭，目的是惩罚叙利亚政府“对平民使用化学武器”。据媒体报道，4月7日，叙利亚东古塔地区疑似发生化武袭击平民事件，导致70多人死亡。事件曝光后，美、英等国以及叙利亚反对派纷纷谴责叙利亚阿萨德政权动用化学武器残害平民...</div>
                    </div>
                    <div class="msg_notice_titleinfo_img"></div>
                  </div>
                </a>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </section>


    <!-- 聊天界面 添加成员弹出菜单 -->
    <div id="quickviewDefault" class="quickview">
      <header class="quickview-header">
        <p class="title">已选成员</p>
        <i class="iconfont quickview_modal_close" data-dismiss="quickview">&#xe643;</i>
      </header>
      <div class="quickview-body">
        <div class="quickview-block">
          <div class="chat_member">
            <div class="chat_member_box">
              <div class="chat_member_imgtext">
                <div class="chat_member_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="chat_member_name">LeoUID</div>
              </div>
              <a>
                <i class="iconfont iconfont_delete">&#xe65c;</i>
              </a>
            </div>
            <div class="chat_member_box">
              <div class="chat_member_imgtext">
                <div class="chat_member_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="chat_member_name">LeoUID</div>
              </div>
              <a>
                <i class="iconfont iconfont_delete">&#xe65c;</i>
              </a>
            </div>
            <div class="chat_member_box">
              <div class="chat_member_imgtext">
                <div class="chat_member_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="chat_member_name">LeoUID</div>
              </div>
              <a>
                <i class="iconfont iconfont_delete">&#xe65c;</i>
              </a>
            </div>
          </div>
          <div class="chat_member_search">
            <span>待选成员</span>
            <i class="iconfont chat_member_search_icon">&#xe63c;</i>
            <input class="chat_member_search_input" placeholder="搜索联系人">
          </div>
          <div class="chat_member unchoose_member">
            <div class="chat_member_box">
              <div class="chat_member_imgtext">
                <div class="chat_member_img">
                  <img src="./dropdown_mine_img.png" alt="">
                </div>
                <div class="chat_member_name">LeoUID</div>
              </div>
              <a>
                <input class="is-checkradio is-success is-circle is-small" id="unchoose_member_item" type="checkbox" name="unchoose_member_item" checked="checked">
                <label for="unchoose_member_item"></label>
              </a>
            </div>
          </div>
        </div>
      </div>
      <footer class="quickview-footer">
        <input class="button is-info" type="submit" value="确认" data-dismiss="quickview">
        <input class="button" type="submit" value="取消" data-dismiss="quickview">
      </footer>
    </div>
    <!-- 聊天界面 个人资料弹出菜单 -->
    <div id="quickviewPersonalinfo" class="quickview">
      <header class="quickview-header">
        <div class="personalinfo_img"><img src="./dropdown_mine_img.png" alt=""></div>
        <div class="personalinfo_text">
          <div class="personalinfo_text_title"><span>Jessica</span><i class="iconfont">&#xe6f0;</i></div>
          <div class="personalinfo_text_info">这家伙很懒， 什么也没有留下！</div>
        </div>
        <i class="iconfont quickview_modal_close" data-dismiss="quickview">&#xe643;</i>
      </header>
      <div class="quickview-body">
        <table class="table is-hoverable is-fullwidth personalinfo_item">
          <tbody>
            <tr>
              <td>备注名称</td>
              <td>杜娟<a><i class="iconfont">&#xe640;</i></a></td>
            </tr>
            <tr>
              <td>国家/地区</td>
              <td>中国 北京</td>
            </tr>
            <tr>
              <td>乐么号</td>
              <td>happy5789937567</td>
            </tr>
            <tr>
              <td>手机号码</td>
              <td>138 8888 8888</td>
            </tr>
            <tr>
              <td>电子邮箱</td>
              <td>wangxiaoshuo@sina.com</td>
            </tr>
            <tr>
              <td>好友来源</td>
              <td>通过群聊添加</td>
            </tr>
          </tbody>
        </table>
      </div>
      <footer class="quickview-footer">
        <i class="iconfont">&#xeab5;</i>
        <i class="iconfont">&#xeab5;</i>
        <i class="iconfont">&#xeab5;</i>
      </footer>
    </div>
    <!-- 聊天界面 群公告弹出菜单 -->
    <div id="quickviewGroupnotice" class="quickview">
        <header class="quickview-header">
          <span>群公告</span>
          <i class="iconfont quickview_modal_close" data-dismiss="quickview">&#xe643;</i>
        </header>
        <div class="quickview-body">
          <div class="groupnotice_user">
            <div class="groupnotice_user_img"><img src="./dropdown_mine_img.png" alt=""></div>
            <div class="groupnotice_user_info">
              <div class="groupnotice_user_info_name">LeoUID</div>
              <div class="groupnotice_user_info_time">更新于 11:30:12</div>
            </div>
          </div>
          <div class="groupnotice_text">
            <p>五一放假安排通知：</p>
            <p>公司全体员工：</p>
            <p>根据《国务院关于修改（全国年节及纪念日放假办法）的决定》，我司“五一”国际劳动节放假安排如下：“五一”国际劳动节：04月29日至05月01日放假，04月28日（星期六）上班。</p>
            <p>其中，其中04月29日（星期日）为公休、04月28日（星期六）公休调至04月30日（星期一）、05月01日（星期二、“五一”国际劳动节）为法定节假日。节假日期间，各部门应妥善安排好值班和安全、保卫等工作，遇有重大突发事件发生，要按规定及时报告并妥善处置，确保安全、平稳度过节日假期。</p>
            <p>预祝大家节日快乐！</p>
            <p>2018年04月26日</p>
          </div>
        </div>
        <footer class="quickview-footer">
            <input class="button is-info" type="submit" value="发布" data-dismiss="quickview">
            <input class="button" type="submit" value="取消" data-dismiss="quickview">
        </footer>
    </div>
    <!-- 聊天界面 群设置弹出菜单 -->
    <div id="quickviewGroupsetting" class="quickview">
      <header class="quickview-header">
        <div class="groupsetting_title">
          <div class="groupsetting_title_img"><img src="./dropdown_mine_img.png" alt=""></div>
          <div class="groupsetting_title_info"><span>Nicepsd ^_^</span><i class="iconfont">&#xe640;</i></div>
        </div>
        <i class="iconfont quickview_modal_close" data-dismiss="quickview">&#xe643;</i>
      </header>
      <div class="quickview-body">
        <div class="groupmember">
          <div class="groupmember_title">
            <span>群成员 10人</span>
            <span><i class="iconfont">&#xe63f;</i><i class="iconfont">&#xe63e;</i></span>
          </div>
          <div class="groupmember_img">
            <div class="groupmember_img_item">
              <img src="./dropdown_mine_img.png" alt="">
              <span>麦克</span>
            </div>
            <div class="groupmember_img_item">
                <img src="./dropdown_mine_img.png" alt="">
                <span>麦克</span>
              </div>
              <div class="groupmember_img_item">
                  <img src="./dropdown_mine_img.png" alt="">
                  <span>麦克</span>
                </div>
                <div class="groupmember_img_item">
                    <img src="./dropdown_mine_img.png" alt="">
                    <span>麦克</span>
                  </div>
          </div>
          <div class="groupmember_img">
            <div class="groupmember_img_item">
              <img src="./dropdown_mine_img.png" alt="">
              <span>麦克</span>
            </div>
            <div class="groupmember_img_item">
                <img src="./dropdown_mine_img.png" alt="">
                <span>麦克</span>
              </div>
              <div class="groupmember_img_item">
                  <img src="./dropdown_mine_img.png" alt="">
                  <span>麦克</span>
                </div>
                <div class="groupmember_img_item">
                    <img src="./dropdown_mine_img.png" alt="">
                    <span>麦克</span>
                  </div>
          </div>
          <div class="groupmember_linkmore"><a>查看更多</a></div>
        </div>
        <div class="groupmember_setting">
          <div class="groupmember_setting_content">
            <span>开放成员邀请</span>
            <div class="field">
              <input id="groupmember_invite" name="groupmember_invite" class="switch is-rounded is-info" checked="checked" type="checkbox">
              <label for="groupmember_invite"></label>
            </div>
          </div>
          <div class="groupmember_setting_content">
            <span>置顶聊天</span>
            <div class="field">
              <input id="groupmember_topchat" name="groupmember_topchat" class="switch is-rounded is-info" checked="checked" type="checkbox">
              <label for="groupmember_topchat"></label>
            </div>
          </div>
          <div class="groupmember_setting_content">
            <span>消息免打扰</span>
            <div class="field">
              <input id="groupmember_mutechat" name="groupmember_mutechat" class="switch is-rounded is-info" type="checkbox">
              <label for="groupmember_mutechat"></label>
            </div>
          </div>
          <div class="groupmember_setting_content">
            <span>显示群成员昵称</span>
            <div class="field">
              <input id="groupmember_showname" name="groupmember_showname" class="switch is-rounded is-info" checked="checked" type="checkbox">
              <label for="groupmember_showname"></label>
            </div>
          </div>
        </div>
        <div class="groupmember_myname">我在本群的昵称  <span>麦克<a><i class="iconfont">&#xe640;</i></a></span></div>
        <div class="groupmember_manage">群主管理权转让</div>
      </div>
      <footer class="quickview-footer">
        <a><i class="iconfont">&#xeab5;</i></a>
        <a><i class="iconfont" data-dismiss="quickview">&#xe63d;</i></a>
      </footer>
    </div>
    <!-- 侧边栏图标菜单 设置 模态框 -->
    <div id="modal-ter" class="modal">
      <div class="modal-background"></div>
      <div class="modal-card modal_card">
        <header class="modal-card-head">
          <p class="modal-card-title">设置</p>
          <i class="iconfont iconfont-close" aria-label="close">&#xe643;</i>
        </header>
        <section class="modal-card-body modal_card_radio">
          <div class="moda_content">
            <span>桌面通知权限</span>
            <div class="field">
              <input id="setting_notifacation" type="checkbox" name="setting_notifacation" class="switch is-rounded is-info" checked="checked">
              <label for="setting_notifacation"></label>
            </div>
          </div>
          <div class="moda_content">
            <span>消息提示音</span>
            <div class="field">
              <input id="setting_audio" type="checkbox" name="setting_audio" class="switch is-rounded is-info" checked="checked">
              <label for="setting_audio"></label>
            </div>
          </div>
          <div class="moda_content">
            <span>开机自启动</span>
            <div class="field">
              <input id="setting_startup" type="checkbox" name="setting_startup" class="switch is-rounded is-info">
              <label for="setting_startup"></label>
            </div>
          </div>
  
        </section>
        <section class="modal-card-body modal_check_radio">
          <span class="modal_shortcut">发送消息快捷键</span>
          <div class="field">
            <input class="is-checkradio is-info" id="setting_enter" type="radio" name="setting_enter" checked="checked">
            <label for="setting_enter">Enter 发送，Ctrl+Enter 换行</label>
          </div>
          <div class="field">
            <input class="is-checkradio is-info" id="setting_ctrlenter" type="radio" name="setting_enter">
            <label for="setting_ctrlenter">Ctrl+Enter 发送，Enter 换行</label>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button class="button is-info">确定</button>
        </footer>
      </div>
    </div>
  </main>
  <script>

  $('.iconfont_delete').on('click', function () {
    $(this).parents('.chat_member_box').remove()
  })

    $(function () {
      // Initializes and creates emoji set from sprite sheet
      window.emojiPicker = new EmojiPicker({
        emojiable_selector: '[data-emojiable=true]',
        assetsPath: '../lib/img/',
        popupButtonClasses: 'fa fa-smile-o'
      });
      // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
      // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
      // It can be called as many times as necessary; previously converted input fields will not be converted again
      window.emojiPicker.discover();
    });
  </script>
  <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }
  </script>
</body>
</html>